import React from 'react'
// ===================================================================== Temp
import Controls from '#cpt/temp/Controls'
import Table from '#cpt/temp/Table'
// ===================================================================== global declare
const { $fn, $Lazy, $http } = window
// ===================================================================== Lazy
const Page 			= $Lazy.load(()=>import('#tp/page/page-container-scroll'))
const SubmitForm 	= $Lazy.state(()=>import('#cpt/form/submit-form'))
const Box 			= $Lazy.load(()=>import('#tp/box/box'))
const p = '--'
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		// 搜索表单列表
		formData : [
			{ label: '条码号',		name: 'spec_code', 		p },
			{ label: '姓名',			name: 'patient_name', 	p },
			{ label: '籍贯',			name: '',				p },
			{ label: '证件号',		name: 'card_no', 		p },
			{ label: '性别',			name: 'sex_name',		p },
			{ label: '病人电话',		name: 'patient_phone', 	p },
			{ label: '年龄',			name: 'age_first_val', 	p },
			{ label: '民族',			name: '', 				p },
			{ label: '出生日期',		name: '', 				p },
			{ label: '婚姻',			name: '', 				p },
		],
		formData_hosp : [
			{ label: '送检医院',		name: 'hosp_name', 			p },
			{ label: '患者类型',		name: 'case_type_name', 	p },
			{ label: '送检医生',		name: 'doctor',				p },
			{ label: '医生电话',		name: 'doctor_phone', 		p },
			{ label: '住院/门诊号',	name: 'outpatient',			p },
			{ label: '送检科室',		name: 'department_name', 	p },
			{ label: '床号',			name: 'bed_no', 			p },
		],
		formData_sample : [
			{ label: '标本类型',		name: '', 				p },
			{ label: '标本性状',		name: '', 				p },
			{ label: '采集时间',		name: 'coll_time',		p },
			{ label: '临床诊断',		name: 'diagnosis_info', 	half:true, p, type:'textarea',br:true },
			{ label: '备注',			name: 'remark',		half:true, p, type:'textarea' },
		],
	}
	
	cols = [
		{ title: '项目代码',			dataIndex: 'kind_code', 		width:150 },
		{ title: '项目名称', 		dataIndex: 'kind_name', 		width:200 },
		{ title: '项目属性', 		dataIndex: 'kind_type_name', 	width:150 },
	]
	
	componentDidMount(){
		const {uuid,spec_code}=$fn.query()
		this.query = {spec_code}
		$http.submit(null,'spec-case-info/info',{ param:{uuid} }).then(data=>{
			this.formDataRef1.setValue(data)
			this.formDataRef2.setValue(data)
			this.formDataRef3.setValue(data)
		})
		this.fetch()
	}
	// paging
	fetch = () => $fn.fetch.call(this,'specimen-kind/index',{paging:'get'})
	
	// 操作按钮
	controls = () => [ Controls.back.call(this) ]
	render(){
		return (
			<>
				<Page title='详细信息' nobc controls={this.controls()}>
					<div className='fx' >
						<Box title='病患基本信息' className='ex' first>
							<SubmitForm data = {this.state.formData} hideButton mb={0} labelWidth='s5' readOnly width='33%' onRef={ ref => this.formDataRef1 = ref } />
						</Box>
						<Box title='送检医院信息' className='ex ml5' first>
							<SubmitForm data = {this.state.formData_hosp} hideButton mb={0} labelWidth='s6' readOnly half onRef={ ref => this.formDataRef2 = ref } />
						</Box>
					</div>
					<Box title='送检标本信息' className='mt5'>
						<SubmitForm data = {this.state.formData_sample} hideButton mb={0} labelWidth='s5' readOnly onRef={ ref => this.formDataRef3 = ref } />
					</Box>
					{/* 表格 */}
					<Box title='送检项目信息' className='mt5'>
						{ Table.call(this,{wrapClassName:'mt10 mlr10'}) }
					</Box>
				</Page>
			</>
		)
	}
}

export default Index